<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CodePen - Pure CSS Happy Hacking Keyboard</title>
    <!-- <link rel="stylesheet" href="./style.css"> -->
    <style>
      @import url(https://fonts.googleapis.com/css?family=Average+Sans);
      #update {
        margin-top: 60px;
        text-align: center;
      }

      /* -------------------------------------
 * style
 * ------------------------------------- */
      body {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 890px;
        /* margin: 0 auto; */
        /* padding: 100px 30px 30px; */
        font-family: 'Average Sans', sans-serif;
        color: #555;
        text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
        background: #c7dbe5;
      }

      /*------- Keyboard ------- */
      #keyboard {
        padding: 30px 8px 13px;
        background: #f5f3f1;
        background: -webkit-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
        background: -moz-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
        background: -ms-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
        background: -o-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
        background: linear-gradient(to bottom, #e5e2e1, #f5f3f1, #e5e2e1);
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.3);
        -webkit-transform: rotateX(15deg);
        -ms-transform: rotateX(15deg);
        -o-transform: rotateX(15deg);
      }

      #main {
        padding: 2px;
        background: #4d4d4d;
        border-radius: 4px;
        overflow: hidden;
      }

      #addition_wrap {
        width: 650px;
        margin: -2px 0 0 85px;
        padding: 0 2px 2px;
        background: #4d4d4d;
        border-radius: 0 0 4px 4px;
        position: relative;
      }
      #addition_wrap:before,
      #addition_wrap:after {
        content: '';
        width: 5px;
        height: 5px;
        background: #ebe8e7;
        border-top: 2px solid #4d4d4d;
        position: absolute;
        top: 0px;
      }
      #addition_wrap:before {
        left: -5px;
        border-right: 2px solid #4d4d4d;
        border-radius: 0 5px 0 0;
      }
      #addition_wrap:after {
        right: -5px;
        border-left: 2px solid #4d4d4d;
        border-radius: 5px 0 0 0;
      }

      #addition {
        overflow: hidden;
      }

      .key,
      .f_key {
        width: 40px;
        height: 45px;
        margin: 2px;
        border-width: 3px 7px 10px;
        border-style: solid;
        border-radius: 4px;
        float: left;
      }
      .key.pressed,
      .f_key.pressed {
        -webkit-transform: scale(0.95, 0.95);
        -moz-transform: scale(0.95, 0.95);
        -ms-transform: scale(0.95, 0.95);
        -o-transform: scale(0.95, 0.95);
        transform: scale(0.95, 0.95);
      }

      .key {
        background: #d3cfcc;
        border-color: #ece8e4 #dedad6 #c9c4c4;
      }

      .f_key {
        background: #a8aeb8;
        border-color: #c4c7cc #adb9cc #96a6bd;
      }

      .key .keycap {
        width: 33px;
        height: 40px;
        padding: 5px 0 0 7px;
        font-size: 18px;
        line-height: 1;
        background: #f5f3f1;
        background: -webkit-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
        background: -moz-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
        background: -ms-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
        background: -o-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
        background: linear-gradient(to right, #e5e2e1, #f5f3f1, #e5e2e1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        position: relative;
      }

      .f_key .keycap {
        width: inherit;
        height: inherit;
        font-size: 15px;
        line-height: 45px;
        text-indent: 7px;
        background: #cdd3de;
        background: -webkit-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
        background: -moz-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
        background: -ms-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
        background: -o-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
        background: linear-gradient(to right, #bbc3d2, #cdd3de, #bbc3d2);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        position: relative;
      }

      .top {
        padding: 3px 5px 0 0;
        font-size: 12px;
        font-style: italic;
        text-align: right;
        line-height: 1;
        display: block;
      }

      .bottom {
        width: inherit;
        line-height: 20px;
        display: block;
      }

      .side {
        font-size: 10px;
        line-height: 1;
        display: block;
        position: absolute;
        left: 4px;
        bottom: -10px;
        -webkit-transform: rotateX(50deg);
        -moz-transform: rotateX(50deg);
        -ms-transform: rotateX(50deg);
        -o-transform: rotateX(50deg);
        transform: rotateX(50deg);
      }

      .f_key .side {
        left: -3px;
      }

      .k13 .side {
        right: 7px;
        text-align: right;
      }

      /*------- key width ------- */
      .k27,
      .k18.left {
        width: 38px;
        border-right-width: 9px;
      }

      .k192,
      .fn,
      .k18.right {
        width: 38px;
        border-left-width: 9px;
      }

      .k192 .keycap {
        width: 30px;
      }

      .k9 {
        width: 66px;
        border-right-width: 10px;
      }

      .k8 {
        width: 66px;
        border-left-width: 10px;
      }

      .k17 {
        width: 87px;
        border-right-width: 10px;
      }

      .k13 {
        width: 103px;
        border-left-width: 10px;
      }

      .k16.left {
        width: 113px;
        border-right-width: 10px;
      }

      .k16.right {
        width: 77px;
        border-left-width: 10px;
      }

      .k91,
      .k93 {
        width: 72px;
      }
      .k91 .top,
      .k93 .top {
        font-size: 13px;
      }
      .k91 .bottom,
      .k93 .bottom {
        font-size: 20px;
      }

      .k91.left {
        border-right-width: 10px;
      }

      .k93.right {
        border-left-width: 10px;
      }

      .k32 {
        width: 328px;
        border-width: 3px 8px 10px;
      }
      .k32 .keycap {
        width: 321px;
      }
      .k32.pressed {
        -webkit-transform: scale(0.98, 0.95);
        -moz-transform: scale(0.98, 0.95);
        -ms-transform: scale(0.98, 0.95);
        -o-transform: scale(0.98, 0.95);
        transform: scale(0.98, 0.95);
      }
    </style>
  </head>
  <body>
    <!-- partial:index.partial.html -->
    <div id="keyboard">
      <div id="main">
        <div class="k27 f_key">
          <div class="keycap">Esc<span class="side">Power</span></div>
        </div>
        <div class="k49 key">
          <div class="keycap">!<br />1<span class="side">F1</span></div>
        </div>
        <div class="k50 key">
          <div class="keycap">@<br />2<span class="side">F2</span></div>
        </div>
        <div class="k51 key">
          <div class="keycap">#<br />3<span class="side">F3</span></div>
        </div>
        <div class="k52 key">
          <div class="keycap">$<br />4<span class="side">F4</span></div>
        </div>
        <div class="k53 key">
          <div class="keycap">%<br />5<span class="side">F5</span></div>
        </div>
        <div class="k54 key">
          <div class="keycap">^<br />6<span class="side">F6</span></div>
        </div>
        <div class="k55 key">
          <div class="keycap">&<br />7<span class="side">F7</span></div>
        </div>
        <div class="k56 key">
          <div class="keycap">*<br />8<span class="side">F8</span></div>
        </div>
        <div class="k57 key">
          <div class="keycap">(<br />9<span class="side">F9</span></div>
        </div>
        <div class="k48 key">
          <div class="keycap">)<br />0<span class="side">F10</span></div>
        </div>
        <div class="k189 key">
          <div class="keycap">_<br />-<span class="side">F11</span></div>
        </div>
        <div class="k187 key">
          <div class="keycap">+<br />=<span class="side">F12</span></div>
        </div>
        <div class="k220 key">
          <div class="keycap">|<br />\<span class="side">Ins</span></div>
        </div>
        <div class="k192 key">
          <div class="keycap">~<br />`<span class="side">Del</span></div>
        </div>
        <div class="k9 f_key">
          <div class="keycap">Tab<span class="side">Caps</span></div>
        </div>
        <div class="k81 key">
          <div class="keycap">Q</div>
        </div>
        <div class="k87 key">
          <div class="keycap">W</div>
        </div>
        <div class="k69 key">
          <div class="keycap">E</div>
        </div>
        <div class="k82 key">
          <div class="keycap">R</div>
        </div>
        <div class="k84 key">
          <div class="keycap">T</div>
        </div>
        <div class="k89 key">
          <div class="keycap">Y</div>
        </div>
        <div class="k85 key">
          <div class="keycap">U</div>
        </div>
        <div class="k73 key">
          <div class="keycap">I<span class="side">PSc/SRq</span></div>
        </div>
        <div class="k79 key">
          <div class="keycap">O<span class="side">ScrLk</span></div>
        </div>
        <div class="k80 key">
          <div class="keycap">P<span class="side">Pus/Brk</span></div>
        </div>
        <div class="k219 key">
          <div class="keycap">{<br />[<span class="side">↑</span></div>
        </div>
        <div class="k221 key">
          <div class="keycap">}<br />]</div>
        </div>
        <div class="k8 f_key">
          <div class="keycap">
            Delete<span class="side"
              >BS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em>Clear</em></span
            >
          </div>
        </div>
        <div class="k17 f_key">
          <div class="keycap">Control</div>
        </div>
        <div class="k65 key">
          <div class="keycap">A<span class="side">Vol_Dn</span></div>
        </div>
        <div class="k83 key">
          <div class="keycap">S<span class="side">Vol_Up</span></div>
        </div>
        <div class="k68 key">
          <div class="keycap">D<span class="side">Mute</span></div>
        </div>
        <div class="k70 key">
          <div class="keycap">F<span class="side">Eject</span></div>
        </div>
        <div class="k71 key">
          <div class="keycap">G</div>
        </div>
        <div class="k72 key">
          <div class="keycap">H<span class="side">*</span></div>
        </div>
        <div class="k74 key">
          <div class="keycap">J<span class="side">/</span></div>
        </div>
        <div class="k75 key">
          <div class="keycap">K<span class="side">Home</span></div>
        </div>
        <div class="k76 key">
          <div class="keycap">L<span class="side">PageUp</span></div>
        </div>
        <div class="k186 key">
          <div class="keycap">:<br />;<span class="side">←</span></div>
        </div>
        <div class="k222 key">
          <div class="keycap">"<br />'<span class="side">→</span></div>
        </div>
        <div class="k13 f_key">
          <div class="keycap">
            Return<span class="side"><em>Enter</em></span>
          </div>
        </div>
        <div class="k16 left f_key">
          <div class="keycap">Shift</div>
        </div>
        <div class="k90 key">
          <div class="keycap">Z</div>
        </div>
        <div class="k88 key">
          <div class="keycap">X</div>
        </div>
        <div class="k67 key">
          <div class="keycap">C</div>
        </div>
        <div class="k86 key">
          <div class="keycap">V</div>
        </div>
        <div class="k66 key">
          <div class="keycap">B</div>
        </div>
        <div class="k78 key">
          <div class="keycap">N<span class="side">+</span></div>
        </div>
        <div class="k77 key">
          <div class="keycap">M<span class="side">-</span></div>
        </div>
        <div class="k188 key">
          <div class="keycap"><<br />,<span class="side">End</span></div>
        </div>
        <div class="k190 key">
          <div class="keycap">><br />.<span class="side">PageDn</span></div>
        </div>
        <div class="k191 key">
          <div class="keycap">?<br />/<span class="side">↓</span></div>
        </div>
        <div class="k16 right f_key">
          <div class="keycap">Shift</div>
        </div>
        <div class="fn f_key">
          <div class="keycap">Fn</div>
        </div>
      </div>
      <div id="addition_wrap">
        <div id="addition">
          <div class="k18 left f_key">
            <div class="keycap"><span class="top">Opt</span><span class="bottom">Alt</span></div>
          </div>
          <div class="k224 k91 left f_key">
            <div class="keycap"><span class="top">⌘</span><span class="bottom">◇</span></div>
          </div>
          <div class="k32 key">
            <div class="keycap"></div>
          </div>
          <div class="k224 k93 right f_key">
            <div class="keycap">
              <span class="top">⌘</span><span class="bottom">◇</span><span class="side">Stop</span>
            </div>
          </div>
          <div class="k18 right f_key">
            <div class="keycap"><span class="top">Opt</span><span class="bottom">Alt</span></div>
          </div>
        </div>
      </div>
    </div>

    <!-- <p id="update">
      <a href="https://codepen.io/dehash">@dehash</a> added a typing effect to this pen. Very cool!
      Please check:
      <a href=" https://codepen.io/dehash/pen/nEJyf">https://codepen.io/dehash/pen/nEJyf</a>
    </p> -->
    <!-- partial -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- <script src="./script.js"></script> -->
    <script>
      // Bind keyup event, thanks @vendruscolo
      $(window).on({
        keydown: function (e) {
          var pressedKey = $('.k' + e.keyCode)
          pressedKey.addClass('pressed')
        },
        keyup: function (e) {
          var pressedKey = $('.k' + e.keyCode)
          pressedKey.removeClass('pressed')
        }
      })
    </script>
  </body>
</html>
